<template>
  <view class="custom-tabbar" :style="{ paddingBottom: safeAreaBottom + 'px' }">
    <view class="tabbar-content">
      <view 
        class="tabbar-item" 
        v-for="(item, index) in tabList" 
        :key="index"
        @click="switchTab(item.pagePath, index)"
      >
        <view class="icon-wrapper">
          <image 
            class="tabbar-icon"
            :class="{ 'icon-hidden': currentIndex === index }"
            :src="item.iconPath"
            mode="aspectFit"
            :lazy-load="false"
          />
          <image 
            class="tabbar-icon icon-selected"
            :class="{ 'icon-visible': currentIndex === index }"
            :src="item.selectedIconPath"
            mode="aspectFit"
            :lazy-load="false"
          />
        </view>
        <text 
          class="tabbar-text" 
          :class="{ active: currentIndex === index }"
        >
          {{ item.text }}
        </text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, watch, nextTick, onActivated, onUnmounted } from 'vue'

const props = defineProps({
  current: {
    type: String,
    default: ''
  }
})

const safeAreaBottom = ref(0)
const currentIndex = ref(0)
const isSwitching = ref(false)
let checkInterval = null

const tabList = [
  { pagePath: '/pages/index/index', text: '首页', iconPath: '/static/tabbar/home.png', selectedIconPath: '/static/tabbar/home-active.png' },
  { pagePath: '/pages/service/service', text: '服务', iconPath: '/static/tabbar/service.png', selectedIconPath: '/static/tabbar/service-active.png' },
  { pagePath: '/pages/profile/profile', text: '我的', iconPath: '/static/tabbar/profile.png', selectedIconPath: '/static/tabbar/profile-active.png' }
]

// 标准化路径格式
const normalizePath = (path) => {
  if (!path) return ''
  return path.startsWith('/') ? path : '/' + path
}

// 更新当前选中索引
const updateCurrentIndex = () => {
  try {
    const pages = getCurrentPages()
    let currentPath = ''
    
    if (pages?.length > 0 && pages[pages.length - 1]?.route) {
      currentPath = normalizePath(pages[pages.length - 1].route)
    } else if (props.current) {
      currentPath = normalizePath(props.current)
    }
    
    if (currentPath) {
      const index = tabList.findIndex(item => normalizePath(item.pagePath) === currentPath)
      if (index !== -1) {
        currentIndex.value = index
      }
    }
  } catch (error) {
    console.error('更新 TabBar 选中状态失败:', error)
  }
}

onMounted(() => {
  const windowInfo = uni.getWindowInfo()
  safeAreaBottom.value = windowInfo.safeAreaInsets?.bottom || 0
  setTimeout(updateCurrentIndex, 100)
  checkInterval = setInterval(updateCurrentIndex, 500)
})

onUnmounted(() => {
  if (checkInterval) {
    clearInterval(checkInterval)
  }
})

onActivated(updateCurrentIndex)

watch(() => props.current, updateCurrentIndex, { immediate: true })

const switchTab = (url, index) => {
  if (isSwitching.value || currentIndex.value === index) return
  
  isSwitching.value = true
  currentIndex.value = index
  
  nextTick(() => {
    uni.switchTab({
      url,
      success: () => {
        setTimeout(() => {
          updateCurrentIndex()
          isSwitching.value = false
        }, 100)
      },
      fail: (err) => {
        console.error('切换 TabBar 失败:', err)
        isSwitching.value = false
        updateCurrentIndex()
      }
    })
  })
}
</script>

<style scoped>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #ffffff;
  border-top: 1rpx solid #e5e5e5;
  z-index: 9999;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.tabbar-content {
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* height: 98rpx; */
  padding: 10rpx 0;
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  position: relative;
}

.icon-wrapper {
  position: relative;
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 4rpx;
}

.tabbar-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 48rpx;
  height: 48rpx;
  transition: opacity 0.2s ease;
}

.icon-selected {
  opacity: 0;
}

.icon-visible {
  opacity: 1 !important;
}

.icon-hidden {
  opacity: 0 !important;
}

.tabbar-text {
  font-size: 22rpx;
  color: #999999;
  line-height: 1;
  transition: color 0.2s ease;
}

.tabbar-text.active {
  color: #4A90E2;
  font-weight: 500;
}
</style>

